<img src="/assets/imgs/login/bg.png" class="wave">
<div class="login-container flex flex-between">
	<!-- 使用svg -->
	<div class="img flex flex-end align-center">
		<img src="/assets/imgs/login/illustration.svg">
	</div>
	<div class="login-box flex align-center flex-1">
		<div class="login-form">
			<img src="/assets/imgs/logo.png" alt="" class="avatar">
			<h2> 建站通2.0 </h2>
			<form class="form">
				<mat-form-field class="form-item">
					<mat-label>用户名</mat-label>
					<mat-icon matTextPrefix aria-hidden="false" aria-label="用户名" fontIcon="person" class="form-icon" />
					<input
							class="form-input"
							matInput
							placeholder="用户名"
							[formControl]="username"
							(blur)="updateErrorUsername()"
							required
					/>
					@if (username.invalid) {
						<mat-error>{{ errorUserMessage() }}</mat-error>
					}
				</mat-form-field>
				<mat-form-field class="form-item">
					<mat-label>密码</mat-label>
					<mat-icon matTextPrefix aria-hidden="false" aria-label="密码" fontIcon="lock" class="form-icon" />
					<input
							class="form-input"
							matInput
							placeholder="密码"
							[formControl]="password"
							(blur)="updateErrorPassword()"
							required
							type="password"
					/>
					@if (username.invalid) {
						<mat-error>{{ errorPasswordMessage() }}</mat-error>
					}
				</mat-form-field>
				<button mat-flat-button class="login-btn" (click)="login()" type="submit">登录</button>
			</form>
		</div>
	</div>
</div>
